<template>
    <div>
        <gm-nav></gm-nav>
        <div class="main-container">
            <gm-title>
                <template v-slot:title>频道分类</template>
                <template v-slot:text>分享浏览优秀短片</template>
            </gm-title>
            <el-row :gutter="20">
                <el-col 
                v-for="item in fenleiArr"
                :key="item.orderid"
                :span="6">
                    <div class="grid-content bg-purple">
                        <router-link :to="'channelList/'+item.cateid">
                            <gm-fenlei
                            :fenleiObj="item"
                            ></gm-fenlei>
                        </router-link>
                    </div>
                </el-col>
            </el-row>
        </div>
        <gm-footer></gm-footer>
    </div>
</template>

<script>
import gmNav from '../components/gmNav.vue'
import gmTitle from "@/components/gmTitle.vue"
import gmFenlei from "@/components/gmFenlei.vue"
import gmFooter from "@/components/gmFooter.vue"

export default {
    name: "Channel",
    components:{
        gmNav,
        gmTitle,
        gmFenlei,
        gmFooter
    },
    data(){
        return {
            fenleiArr:[],
        }
    },
    mounted(){
        let url = "https://apis.netstart.cn/vmovier/cate/getList";
        let gms = axios.get(url);
        gms.then( res => {
            let newRes = res.data.data.filter((val)=>{
                return val.cateid
            })
            this.fenleiArr = newRes
        });
    }
}
</script>

<style lang="scss" scoped>
.el-col{
    margin-bottom: 30px;
}
.main-container{
    width: 1180px;
    margin: 0 auto;
}
</style>